<template>
  <view class="modalCenter modalLogin" v-if="modelGet('loginModalVisible')">
    <view class="inner">
      <view class="innerBody">
        <view class="loginTitle">注册/登录后继续操作</view>
        <view class="loginIcon"></view>
        <view v-if="loginWXVisible" class="loginBtn1" @click="getUserProfileHandler">微信登录</view>
        <button v-if="loginMobileVisible" class="loginBtn1" open-type="getPhoneNumber" @getphonenumber="getphonenumberHandler">手机号绑定</button>
        <view class="loginBtn2" @click="close">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'

export default {
  data(){
    let loginWXVisible = false
    let loginMobileVisible = false

    if (util.modelGet('userInfo.id')) { // 用户已经登录
      loginWXVisible = false
      if (util.modelGet('userInfo.mobile')) {
        loginMobileVisible = false
      } else {
        loginMobileVisible = true
      }
    } else {
      loginWXVisible = true
      loginMobileVisible = false
    }
    return {
      mobile: '',
      password: '',
      loginWXVisible,
      loginMobileVisible,
    }
  },
  props: {
    visible: {
      // 星星的类型，是否镂空
      type: [String],
      default: '默认值',
    },
    clickHandler: {},
  },
  onReady: function (){
  },
  onUnload: function (){
    console.log(`123425435`, 123425435)
  },
  onLoad(){
    console.log(`123425435`, 546788543)
  },
  onReachBottom(){
  },
  onPullDownRefresh(){
  },
  methods: {
    getUserProfileHandler(){
      console.log(`getUserProfileHandler`)
      uni.getUserProfile({
        desc: '用于用户昵称信息展示',
      }).then(([err, info]) => {
        if (info) {
          console.log(`info`, info)
          let infoMore = JSON.parse(info.rawData)
          console.log(`infoMore`, infoMore)

          // 获取code 获取openid
          util.getWXCode().then((code) => {
            console.log(`code`, code)
            util.requestPost('/Sign/getopenid', {
              'admin_id': util.modelGet('appInfo.admin_id'),
              'code': code,
            }).then(({ data }) => {// 成功匹配
              console.log(`data`, data)
              // util.modelSet('userInfo.openid', data.openid)
              // 微信用户注册
              util.requestPost('/Sign/threeLogin', {
                admin_id: util.modelGet('appInfo.admin_id'),
                openid: data.openid,
                avatarUrl: infoMore.avatarUrl,
                nickName: infoMore.nickName,
                gender: infoMore.gender,
              }).then(({ data }) => {
                console.log(`data`, data)
                // util.modelAssign('userInfo', data)
                let token = data.token
                if (token) {
                  uni.setStorageSync('token', token)
                } else {
                  console.error(`login no token`, data)
                }
                util.userInfoGet().then((res) => {
                  console.log(`res`, res)
                  if (!res.mobile) {
                    this.loginWXVisible = false
                    this.loginMobileVisible = true
                  } else {
                    this.close()
                  }
                })
              })

            }).catch((err) => {
            })
          })

          // util.requestUtilPost('/user/updateAvatar', {
          //   'nickName': infoMore.nickName,
          //   'avatarUrl': infoMore.avatarUrl,
          // }).then(({ body }) => {// 成功匹配
          //   console.log(`data`, body)
          // }).catch((err) => {
          // })

          this.modelSet('app.userInfo', {
            ...this.modelGet('app.userInfo'),
            ...infoMore,
          })
        }
      })
    },
    getphonenumberHandler(e){
      this.getUserProfileHandler()
      console.log(`e`, e)
      util.getWXCode().then((code) => {
        util.requestPost('/Sign/userMobile', {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          code,
          // openid: util.modelGet('userInfo.openid'),
        }).then(({ data }) => {
          if (data) {
            util.requestPost('/sign/bindingModel', {
              mobile: data,
              pid: 0,
            }).then(({ data }) => {
              util.message('手机号绑定成功~')
              this.close()
            }).catch((e) => {
              util.message(e.message)
              this.close()
            })
          } else {
            util.message('手机号获取失败~')
            this.close()
          }
        })
      })
    },
    close(){
      this.modelSet('loginModalVisible', false)
    },
    stop(){
    },
    linkTo(url){
      console.log(`url`, url)
      uni.navigateTo({ url })
    },
  },
}
</script>

<style lang="scss">
.modalLogin {
  .innerBody {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 60px !important;
    .loginTitle {
      font-size: 32px;
      font-weight: bolder;
      color: #314558;
      line-height: 44px;
    }
    .loginIcon {
      margin-top: 40px;
      width: 382px;
      height: 332px;

      background-image: url(#{$bgPath}/icon_login_00.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;

    }
    .loginBtn1 {
      margin-top: 40px;
      width: 100%;
      height: 80px;
      background: linear-gradient(90deg, #4FE490 0%, #3FB270 100%);
      border-radius: 4px;

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 32px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 36px;
    }
    .loginBtn2 {
      margin-top: 40px;
      width: 100%;
      height: 80px;
      border-radius: 4px;
      border: 2px solid #CFD3D8;

      font-size: 32px;
      font-weight: 400;
      color: #556675;
      line-height: 36px;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

}
</style>
